<template>
  <Card dis-hover :bordered="false">
    <Form inline :label-width="0" @submit.native.prevent>
      <Row>
        <Col span="22">
          <FormItem>
            <Input
              placeholder="请输入姓名、手机号"
              v-model="params.keywords"
              @on-clear="searchData"
              @on-enter="searchData"
              clearable
            />
          </FormItem>
          <FormItem>
            <DatePicker
              :editable="false"
              type="daterange"
              v-model="timedate"
              :options="options"
              placeholder="创建日期选择"
              @on-change="searchData"
            >
            </DatePicker>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择状态"
              v-model="params.is_reply"
              @on-clear="searchData"
              @on-change="searchData"
              clearable
            >
              <Option
                v-for="item in statusList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col :span="2" class="ivu-text-right">
          <Button
            type="primary"
            @click="clickexport"
            v-hasC="{
              name: 'v1-buss-user-feedback-export',
              flag: 'v1/buss/user-feedback/export',
            }"
            >导出</Button
          >
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #is_reply="{ row }">
        <Tag
          type="border"
          :color="row.is_reply == '1' ? 'success' : 'primary'"
          >{{ row.is_reply_name }}</Tag
        >
      </template>
      <template #content="{ row }">
        <Tooltip
          :content="'回复内容：' + row.reply_content"
          placement="top"
          v-if="row.reply_content"
        >
          {{ row.content }}
        </Tooltip>
        <span v-else>
          {{ row.content }}
        </span>
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-buss-user-feedback-reply',
            flag: 'v1/buss/user-feedback/reply',
          }"
          >回复</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      title="意见回复"
      :footer-hide="true"
      :draggable="true"
      :width="500"
    >
      <p class="ivu-mb-8">{{ ques }}</p>
      <Form ref="create" :model="formInfo">
        <FormItem prop="reply_content">
          <Input
            v-model="formInfo.reply_content"
            type="textarea"
            :rows="6"
            placeholder="回复内容"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button
          type="primary"
          @click="ok"
          :loading="btnLoading"
          style="margin-left: 10px"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  userFeedbackList,
  userFeedbackReply,
  userFeedbackExport,
} from "@api/suggestion.js";
import dayjs from "dayjs";
import Setting from "@/setting";
import util from "@/libs/util";
export default {
  name: "suggestion",
  data() {
    return {
      tableHeigth: document.body.clientHeight - 270,
      addModal: false,
      timedate: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      params: {
        keywords: "",
        is_reply: "",
        current: 1,
        size: 10,
        order_column: "",
        order_sort: "",
      },
      statusList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "id",
          title: "编号",
          width: 80,
        },
        {
          key: "patient_name",
          title: "客户",
          width: 120,
        },
        {
          key: "patient_mobile",
          title: "手机号",
          width: 160,
        },
        {
          slot: "is_reply",
          title: "状态",
          width: 120,
        },
        {
          slot: "content",
          title: "意见内容",
          minWidth: 100,
        },
        {
          key: "created_at_str",
          title: "创建时间",
          width: 160,
        },
        {
          key: "reply_time_str",
          title: "回复时间",
          width: 160,
        },
        {
          slot: "action",
          title: "操作",
          width: 80,
        },
      ],
      list: [],
      loading: false,
      btnLoading: false,
      formInfo: {
        reply_content: "",
      },
      ques: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    clickexport() {
      const params = {
        created_stime: this.timedate[0]
          ? dayjs(this.timedate[0]).format("YYYY-MM-DD")
          : "",
        created_etime: this.timedate[1]
          ? dayjs(this.timedate[1]).format("YYYY-MM-DD")
          : "",
        keywords: this.params.keywords,
        is_reply: this.params.is_reply,
      };
      userFeedbackExport(params).then((res) => {
        window.open(Setting.request.apiBaseURL + "/" + res);
      });
    },
    handleEdit(info) {
      this.addModal = true;
      this.formInfo = {
        id: info.id,
        reply_content: info.reply_content,
      };
      this.ques = info.content;
    },

    getData() {
      this.loading = true;
      const params = {
        created_stime: this.timedate[0]
          ? dayjs(this.timedate[0]).format("YYYY-MM-DD")
          : "",
        created_etime: this.timedate[1]
          ? dayjs(this.timedate[1]).format("YYYY-MM-DD")
          : "",
        keywords: this.params.keywords,
        is_reply: this.params.is_reply,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        pageSize: this.params.size,
        page: this.params.current,
      };
      userFeedbackList(params)
        .then((res) => {
          this.statusList = res.condition;
          this.list = res.list.list;
          this.total = res.list.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    editInfo() {
      this.btnLoading = true;
      const params = {
        id: this.formInfo.id,
        reply_content: this.formInfo.reply_content,
      };
      userFeedbackReply(params)
        .then((res) => {
          this.$Message.success("编辑成功");
          this.addModal = false;
          this.btnLoading = false;
          this.getData();
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.editInfo();
        } else {
          this.addModal = true;
          return;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.radio {
  display: flex;
  justify-content: space-around;
}
:deep(.ivu-tooltip-inner) {
  white-space: normal;
}
</style>
